import React,{useEffect,useState} from 'react'
import {Layout,Menu} from 'antd'
import {getMenusApi} from '@/api/sys'
import '@/assets/css/home.scss'
import {getAllChildren} from '@/utils/commons'
import { Outlet } from 'react-router-dom'
import withRouter from '@/hoc/withRouter'
const {Header,Sider,Content}=Layout
function Home({navigate}) {
  const [menuList,setMenuList]=useState([])
  const [secondMenuList,setSecondMenuList]=useState([])
  const getMenus=async()=>{
     const result= await getMenusApi()
     setMenuList(result.data.menuList)
  }
  useEffect(()=>{
    getMenus()
    //设置
   
  },[])
  return (
    <Layout style={{minHeight:'100vh'}}>
      <Header style={{backgroundColor:'#0098FE',display:'flex',justifyContent:'space-between'}}>
        
         <div style={{display:'flex'}}>
          <div style={{fontSize:'20px',fontFamily:'华文琥珀',color:'white',marginRight:'20px'}}>智慧泊车</div>
          <Menu
            className='firstMenu'
            onClick={(arg)=>{
              //console.log('arg',arg);
              //console.log('二级菜单',getAllChildren(menuList).filter(item=>item.parentId==arg.key));
              setSecondMenuList(getAllChildren(menuList).filter(item=>item.parentId==arg.key))
            }}
           
            style={{backgroundColor:'#0098FE',color:'#fff'}}
            mode="horizontal" 
            items={menuList.filter(item=>item.parentId==0).map(item=>({label:item.name,key:item.menuId}))}>
            </Menu>
         </div>
         <div>
            <div>安全退出</div>
         </div>
      </Header>
      <Layout>
        <Sider style={{backgroundColor:'#fff'}}>  
              <Menu items={secondMenuList.map(item=>({label:item.name,key:item.menuId}))} onClick={(arg)=>{
                let result=secondMenuList.find(item=>item.menuId==arg.key)
                if(result){
                  console.log(result.url);
                  navigate(result.url)
                }
              }}></Menu>
        </Sider>
        <Content>
          <Outlet></Outlet>
        </Content>
      </Layout>
    </Layout>
  )
}
export default withRouter(Home)